<script setup>
import useFormConfig from '@/schema/hooks/use-form-config'

const schema = defineModel('schema')
const currentItem = defineModel('currentItem')

const { formPropsList, formItemPropsList } = useFormConfig()

const activeNames = ref(['form', 'formItem'])

// 通用表单配置
defineOptions({ name: 'FormConfig' })
</script>

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      title="表单属性"
      name="form"
    >
      <el-form :model="schema.formProps">
        <template
          v-for="(item, index) of formPropsList"
          :key="index"
        >
          <el-form-item :label="item.label">
            <component
              :is="item.component"
              v-model="schema.formProps[item.field]"
              v-bind="item.props"
            />
          </el-form-item>
        </template>
      </el-form>
    </el-collapse-item>
    <el-collapse-item
      title="表单项属性"
      name="formItem"
    >
      <el-form
        v-if="currentItem.formItemProps"
        :model="currentItem.formItemProps"
      >
        <el-form-item label="绑定字段">
          <el-input v-model="currentItem.field" />
        </el-form-item>
        <template
          v-for="(item, index) of formItemPropsList"
          :key="index"
        >
          <el-form-item :label="item.label">
            <component
              :is="item.component"
              v-model="currentItem.formItemProps[item.field]"
              v-bind="item.props"
            />
          </el-form-item>
        </template>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>
